<template>
  <view class="download-bg">
    <view v-if="isWeixin" class="tips" />
    <view class="app-info">
      <image
        src="../../static/logo.png"
        mode="scaleToFill"
        width="224rpx"
        height="224rpx"
      />
      <view class="app-name"> 星生生 </view>
      <view v-if="isWeixin" class="download-btn" @click="handleBrowser">
        复制下载链接
      </view>
      <view v-else class="download-btn" @click="handleDownload">
        <u-icon
          size="28rpx"
          name="../../static/icon-down.png"
          space="10rpx"
          label="下载星生生APP"
          label-pos="right"
          label-color="#fff"
        />
      </view>
    </view>
  </view>
</template>
<script>
import config from "@/utils/config.js";
export default {
  data() {
    return {
      isWeixin: false, // 是否在微信中打开
      userAgent: "", // 浏览器类型
    };
  },
  onLoad() {
    let userAgent = navigator.userAgent.toLowerCase();
    if (/iphone|ipad|ipod/i.test(userAgent)) {
      this.isWeixin = false;
      this.userAgent = "ios";
    } else if (userAgent.indexOf("micromessenger") !== -1) {
      console.log("在微信中打开");
      this.isWeixin = true;
      this.userAgent = "android";
    } else {
      console.log("在浏览器中打开");
      this.isWeixin = false;
      this.userAgent = "android";
    }
  },
  methods: {
    // 跳转浏览器打开当前页面
    handleBrowser() {
      uni.showModal({
        title: "提示",
        content: "复制后请在浏览器中打开",
        showCancel: true,
        confirmText: "复制",
        success: ({ confirm }) => {
          if (confirm) {
            uni.setClipboardData({
              data: location.href,
              success: () => {
                uni.showToast({
                  title: "复制成功",
                  icon: "success",
                });
              },
            });
          }
        },
      });
    },
    // 下载APP
    handleDownload() {
      if (this.userAgent === "ios") {
        // window.location.href = config.appStoreUrl;
        uni.showToast({
          title: "暂未上架",
          icon: "none",
        });
      } else {
        const a = document.createElement("a");
        a.href = config.baseUrl + "/app/xss.apk";
        a.download = "星生生.apk"; // 若修改失败，可能是跨域问题
        document.body.appendChild(a);
        a.click();
        document.body.removeChild(a);
      }
    },
  },
};
</script>
<style lang="scss" scoped>
.download-bg {
  width: 100vw;
  height: 100vh;
  background-size: 100% 100%;
  .tips {
    position: fixed;
    background: url("../../static/tips.png") no-repeat;
    background-size: 100% 100%;
    width: 720rpx;
    height: 220rpx;
    right: 20rpx;
    top: 0;
  }
  .app-info {
    position: fixed;
    left: 50%;
    top: 50%;
    width: 100%;
    height: 100%;
    transform: translate(-50%, -60%);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    image {
      width: 224rpx;
      height: 224rpx;
      border-radius: 20rpx;
      box-shadow: 0rpx 0 50rpx rgba(201, 173, 120, 0.5);
    }
    .app-name {
      color: #c9ac78;
      font-size: 40rpx;
      font-weight: 600;
      margin-top: 40rpx;
    }
    .download-btn {
      width: 400rpx;
      height: 100rpx;
      margin-top: 60rpx;
      background: #c9ac78;
      border-radius: 16rpx;
      display: flex;
      color: #fff;
      justify-content: center;
      align-items: center;
      font-size: 30rpx;
      box-shadow: 0rpx 20rpx 50rpx rgba(201, 173, 120, 0.5);
      &:active {
        opacity: 0.8;
      }
    }
  }
}
</style>
